<template>
    <div>
        <!--        方案申报搜索-->
        <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item>
                <el-input clearable v-model="form.schemename" style="width: 300px" placeholder="方案名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="query">搜索</el-button>
            </el-form-item>
        </el-form>
        <!--        待申报列表页面-->
        <el-table
                :data="tableData"
                style="width: 100%;margin-bottom: 20px;"
                row-key="id"
                border
                default-expand-all
        >
            <el-table-column
                    prop="name"
                    label="方案名称"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    label="操作"
                    align="center"
            >
                <template slot-scope="scope">
                    <el-button type="success" size="mini" @click="details(scope.row)">详情</el-button>
                    <el-button
                            type="primary"
                            size="mini"
                            @click="decla(scope.row)">申报
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--        分页-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNo"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next"
                :total="totalRecord" class="text-center mt10">
        </el-pagination>
        <!--        方案详情弹出框-->
        <el-dialog title="详情" :visible.sync="dialogFormVisibleDetails" width="650px">
            <el-form :model="form">
                <el-form-item label="项目名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="参评社会组织性质" :label-width="formLabelWidth">
                    <el-input v-model="form.nature" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="评估年度" :label-width="formLabelWidth">
                    <el-input v-model="form.year" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="参评条件" :label-width="formLabelWidth">
                    <el-input v-model="form.condition" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div style="width: 160px; margin-left: 445px">
                <el-button type="primary" @click="dialogFormVisibleDetails = false" style="margin-left: 95px">关闭
                </el-button>
            </div>
        </el-dialog>
        <!--         方案申报弹出框-->
        <el-dialog
                title="申报"
                :visible.sync="dialogVisible"
                width="600" @close='closeDialog'>
            <el-form ref="form" :model="form" label-width="70px">
                <el-form-item label="申报内容">
                    <el-input type="textarea" v-model="form.content" style="width: 93%"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="save(form.content)">确 定</el-button>
  </span>
        </el-dialog>

    </div>
</template>

<script>


    export default {
        data() {
            return {
                tableData: [],
                dialogVisible: false,  //方案申报弹出框
                dialogFormVisibleDetails: false,  //方案详情弹出框
                form: {
                    schemename: '',
                },
                formLabelWidth: '150px',
                name: '',
                cid: '',
                pageNo: 1,
                pageSize: 10,
                totalRecord: 0,
                totalPage: 0,
            }
        },

        props: {},

        components: {},

        computed: {},

        methods: {
            // 初始化
            async init() {
                const res = await this.$http('declarationList', {
                    pageNo: this.pageNo,
                    pageSize: this.pageSize
                })
                console.log('111', res)
                this.tableData = res.results;
                this.totalPage = res.totalPage;
                this.totalRecord = res.totalRecord;
            },
            //详情
            async details(row) {
                this.dialogFormVisibleDetails = true;
                this.form = row
            },
            //申报
            async decla(row) {
                this.cid = row.id
                this.dialogVisible = true;
            }, async handleSizeChange(val) {
                this.pageSize = val;
                this.init();
            },
            async handleCurrentChange(val) {
                this.pageNo = val;
                this.init();
            },

            handleClose() {
            },
            //搜索
            async query() {
                const res = await this.$http('declarationList', {
                    name: this.form.schemename,
                });
                this.tableData = res.results
                this.totalPage = res.totalPage;
                this.totalRecord = res.totalRecord;
            },
            //申报确定
            async save(parme) {
                console.log('parmaaae', parme)
                const res = await this.$http('declaration', {
                    programme_id: this.cid,
                    content: parme
                })
                this.$message({message: '申报成功', type: 'success'});
                this.dialogVisible = false
                this.init()
            },
            async closeDialog() {
                this.form = {
                    content: ''
                };
            },
        },

        watch: {},

        mounted() {
            this.init();
        },

    }
</script>

<style scoped>

</style>
